<template>
	<view>
		<withdrawal class="withdrawal" ref="withdrawal" v-bind:shopData="shopData" :listBtn="listBtn"></withdrawal>
		<scroll-view scroll-y class="content" style="font-size:24rpx;margin-top:6px;" @scrolltolower="lower" :style="{ height: (windowHeight - withdrawalHeight) + 'px' }">
			<view class="uv-collapse-contentS" v-for="item in dataInfo" @click="listBtn(item)" :key="item.bid">
				<view class="uvCollapseShopImg">
					<image :src="item.logo"></image>
				</view>
				<view class="uvCollapseShopInfo">
					<view class="weight_bold">{{ item.name }}</view>
					<view>店铺地址：{{ item.address }}</view>
					<view class="incomeBox">
						<text class="themeColor weight_bold">营业额：{{ item.amount }}</text>
						<text class="themeColor weight_bold">所得佣金：{{item.commission}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="layer" v-show="layerType == true" @click="layerType = false"></view>
		<view class="layerBox" v-show="layerType == true">
			<view class="shopTitle">{{shopInfo.name ? shopInfo.name :'线上收益'}}</view>
			<uDatetimePicker class="example-body" placeholder="至" v-model="range" :clear-icon="false" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" @change="dayChange" />
			<scroll-view class="layerScrollView" scroll-y="true"  @scrolltolower="layerLower">
				<view v-for="item in shopList" class="layerContent" :key="item.id">
					<view class="uvCollapseShopImg">
						<image :src="item.headimg"></image>
					</view>
					<view class="uvCollapseShopInfo" style="margin-left:8rpx;">
						<view>{{ item.nickname }}</view>
						<view>订单编号：{{ item.order_id }}</view>
						<view class="timeByMoney">
							<text>{{ item.payment_time }}</text>
							<text class="themeColor weight_bold">+{{ ' ' }}{{ item.amount?item.amount:'0.00' }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<loading v-if="loading"></loading>
	</view>
</template>
<script>
var app = getApp();
import withdrawal from '../utils/withdrawal.vue';
import uDatetimePicker from '../uni-datetime-picker_2.2.25/components/uni-datetime-picker/uni-datetime-picker.vue';
import person from '../utils/person.js';
export default {
	components: {
		withdrawal,
		uDatetimePicker,
	},
	data() {
		return {
			loading:true,
			layerType:false,//是否打开弹窗
			start_date: '', // 开始日期
			end_date: '', // 结束日期
			range: [],
			withdrawalHeight: 0, //佣金框高度
			windowHeight: 0,//屏幕总高度
			page: 1, //当前页
			shopList:[], //合伙人下级店铺List
			dataInfo: [], //存放数据lIst
			last_page: 0, //店铺总页数
			totalPage:0,//流水总页面
			pages:1,//流水当前页
			shopInfo:'',//店铺bid 用于修改日期之后的查询
		}
	},

	mounted() {
		let date = new Date(),
			year = date.getFullYear(), //获取完整的年份(4位)
			month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
			strDate = date.getDate() // 获取当前日(1-31)
		if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
		if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
		// this.start_date = `${year}-${month}-${strDate}` // 设置默认日期为当天
		// this.end_date = `${year}-${month}-${strDate}` // 设置默认日期为当天
		
		uni.setStorageSync('pageType','1'); //暂时用于提现判断,1:合伙人提现.2:商户提现
		
		//获取屏幕高度
		uni.getSystemInfo({
			success: (res) => {
				this.windowHeight = res.windowHeight - 10;
			}
		});

		//获取子页面组件高度
		this.$nextTick(function () {
			this.withdrawalHeight = this.$refs.withdrawal.contentHeight;
		});
		
		this.getStoreInfo();
	},

	methods: {
		//滚动底部触发事件
		lower(e) {
			if (this.page < this.last_page) {
				this.page++;
			}
		},
		
		// 日期改变
		dayChange(e) {
			this.pages = 1;
			this.range = e;
			this.start_date = this.range[0];
			this.end_date = this.range[1];
			this.shopList = [];//清空数据
			this.listBtn(this.shopInfo);
		},
		
		//合伙人下面店铺点击事件
		listBtn(shopInfo){
			if(this.shopList.length <= 0){
				this.pages = 1;
				this.shopList = [];//清空数据
				this.getDataFun(shopInfo);
			}else{
				this.layerType = true;
			}
		},
		
		//获取流水数据
		getDataFun(shopInfo){
			this.shopInfo = shopInfo;
			let _this = this;
			this.layerType = true;
			app.get('ApiBusiness/btransaction', {
				bid:shopInfo.bid,
				page: _this.pages,
				limit: 20,
				start_date:_this.start_date,
				end_date:_this.end_date
			}, function(res) {
				let listData = res.data.data;
				listData.forEach(item => {
					_this.shopList.push(item);
				})
			});
		},
		
		//弹窗滑动底部触发事件
		layerLower(e){
			if (this.pages < this.totalPage) {
				this.pages++;
				this.getDataFun(this.shopInfo);
			}
		},

		//获取商户余额
		getStoreInfo() {
			this.loading = true;
			let _this = this;
			app.get('ApiStore/getParnerInfo', {
				page: _this.page,
				limit: 10
			}, function(res) {
				person.shopData.shopName = res.name;//门店名称
				person.shopData.image = res.logo;//门店图片
				person.shopData.amount = res.amount;//余额
				person.shopData.Damount = res.nocash_amount;//待结算金额
				person.shopData.Kamount = res.cash_amount;//可体现金额
				person.shopData.phone = res.tel || '暂无手机号';//手机号
				_this.last_page = res.below_pagecount;
				_this.loading = false;
				let list = res.below;
				list.forEach(item => {
					item.amount = item.amount.toFixed(2);
					item.commission = item.commission.toFixed(2);
					_this.dataInfo.push(item);
				})
			});
		},
	}
}
</script>

<style lang="less">
	
	.shopTitle{
		width:100%;
		float:left;
		text-align: center;
		font-weight: bold;
		font-size:30rpx;
		color:#868686;
		line-height: 35px;
	}
	
	.layer{
		width:100%;
		height:100vh;
		float: left;
		position: fixed;
		top:0;
		left:0;
		background-color: #000;
		opacity: 0.6;
		z-index: 1000;
	}
	
	.layerTipsBox{
		width:100%;
		height: calc(100% - 75px);
		display: flex;
		justify-content:center;
		align-items:center;
		font-size:28rpx;
		font-weight: bold;
		color: #CCCCCC;
	}
	
	.layerBox{
		width: 84%;
		float:left;
		height:70vh;
		position: fixed;
		top:15vh;
		padding:10rpx 20rpx 20rpx 20rpx;
		left:8%;
		background-color: #f1f1f1;
		border-radius: 15rpx;
		z-index: 1001;
	}
	
	.layerScrollView{
		width:100%;
		float:left;
		margin-top:5px;
		height: calc(100% - 75px);
	}
	
	.size24 {
		font-size: 24rpx;
	}

	.weight_bold {
		font-weight: bold;
	}

	.themeColor {
		color: #f56c6c;
	}

	.timeByMoney {
		display: flex;
		justify-content: space-between;
	}

	.tipsBox {
		width: 94%;
		margin: 0 3%;
		font-weight: bold;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		letter-spacing: 1px;
		text-align: center;
		color: #adadad;
		justify-content: center;
	}

	.subsectionBox {
		width: 96%;
		float: left;
		margin: 0 2%;
		height: 7vh;
		display: flex;
		align-content: center;
		flex-wrap: wrap;
	}

	.content {
		width: 100%;
		float: left;
	}

	.partnerListBox {
		width: 94%;
		float: left;
		margin-left: 3%;
	}

	.partnerList {
		width: 94%;
		background-color: #fdf8f6;
		float: left;
		padding: 20rpx 3%;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		display: flex;
	}

	.partnerList image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.partnerData {
		margin-left: 20rpx;
		font-size: 26rpx;
		width: calc(100% - 140rpx);
		display: flex;
		flex-direction: column;
		justify-content: center;
		line-height: 45rpx;
	}

	::v-deep .uv-collapse-item__content__text {
		padding: 0;
	}
	
	.incomeBox {
		display: flex;
		justify-content: space-between;
	}

	.collapseImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.uv-collapse-content {
		width: 94%;
		margin: 0 3%;
		padding: 5rpx 0 5rpx 0;
		display: flex;
		align-items: center;
		/* 	background-color: aqua; */
		// margin-bottom: 20rpx;
	}

	.uv-collapse-contentS {
		width: 94%;
		margin: 0 3%;
		padding: 20rpx;
		display: flex;
		align-items: center;
		/* 	background-color: aqua; */
		margin-bottom: 17rpx;
		box-shadow: 0 2px 5px #CCCCCC;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}
	
	.layerContent{
		width: 100%;
		padding: 15rpx;
		display: flex;
		font-size:24rpx;
		align-items: center;
		margin-bottom: 10rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.uvCollapseShopImg {
		width: 70rpx;
		height: 70rpx;
		float: left;
	}

	.uvCollapseShopImg image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.collapseContent {
		width: 100%;
		// max-height:500rpx;
		// margin-top:20rpx;
		display: flex;
		font-size: 24rpx;
	}

	.uvCollapseShopInfo {
		width: calc(100% - 90rpx);
		float: left;
		margin-left: 15rpx;
		line-height: 40rpx;
	}

	/* ::v-deep .uni-scroll-view-content{
		display: flex;
		align-items:center;
	} */
</style>